<template>
	<span>
	<span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
	<span v-if="index === 0 && scope.row.children && scope.row.children.length > 0" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
	  <i v-if="!scope.row._expanded" class="el-icon-plus"/>
	  <i v-else class="el-icon-minus"/>
	</span>
	</span>
</template>
<script>
export default{
	 props: {
	  /**
	   * @description 传入的scope
	   */
	  index:null,
	  scope: {
	    default: null
	  }
	},
	methods: {
	  // 切换下级是否展开
	  toggleExpanded: function(trIndex) {
		 this.$emit('toggle-expanded',trIndex)
	  },
	}
}
</script>
<style rel="stylesheet/css">
  @keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @-webkit-keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
  $color-blue: #2196F3;
  $space-width: 18px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
    &::before {
      content: ""
    }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }
  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: $color-blue;
    margin-left: -$space-width;
  }
</style>
